<template>
    <!-- 上架记录 -->
    <div class="p-2">
        <searchrevealing>
            <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="97px">
                <el-form-item label="盈亏状态" prop="differenceTag">
                    <el-select v-model="queryParams.differenceTag" placeholder="请选择盈亏状态" clearable filterable
                        style="width: 220px">
                        <el-option v-for="dict in profitLossStatusList" :key="dict.userId" :label="dict.nickName"
                            :value="dict.userId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="盘点完成时间" prop="putTime">
                    <el-date-picker value-format="YYYY-MM-DD" v-model="putTime" type="daterange" @change="pickerChange"
                        start-placeholder="开始时间" end-placeholder="结束时间" clearable style="width: 220px" />
                </el-form-item>
                <el-form-item label="产品部门" prop="createDept">
                    <el-select v-model="queryParams.createDept" placeholder="请选择产品部门" clearable
                        @change="warehouseChange" filterable style="width: 220px">
                        <el-option v-for="dict in warehousedepList" :key="dict.deptId" :label="dict.deptName"
                            :value="dict.deptId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="盘点人" prop="createBy">
                    <el-select v-model="queryParams.createBy" placeholder="请选择盘点人" clearable filterable
                        style="width: 220px">
                        <el-option v-for="dict in stockUserList" :key="dict.userId" :label="dict.nickName"
                            :value="dict.userId" />
                    </el-select>
                </el-form-item>
                <el-form-item label="盘点单号" prop="countId">
                    <el-input v-model="queryParams.countId" placeholder="请输入" clearable style="width: 220px"
                        @keyup.enter="handleQuery" maxlength="19" />
                </el-form-item>

            </el-form>
            <div class="form_button">
                <el-button type="primary" @click="handleQuery" :loading="queryLoading">查询</el-button>
                <el-button @click="resetQuery" :loading="queryLoading">重置</el-button>
            </div>
        </searchrevealing>
        <el-card shadow="never">
            <template #header>
                <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :name="'产品部盘点记录'"
                    @updateColumn="getColmun"></right-toolbar>
            </template>
            <el-table v-loading="loading" :data="selectionRecordList" border @header-dragend="dragEnd">
                <el-table-column label="序号" type="index" width="55" align="center" :fixed="true" />
                <el-table-column v-for="(item, index) in inventoryRecordColumns" :key="index" :label="item.label"
                    align="center" :prop="item.prop" show-overflow-tooltip :fixed="item.fixed" :width="item.width">
                    <template #default="scope">
                        <span v-if="item.prop == 'differenceTag'">
                            {{ scope.row.differenceTag == 1 ? '有盈亏' : '无盈亏' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
                    <template #default="scope">
                        <el-button link type="primary" @click="handleInfo(scope.row)" class="color_theme">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="paginationChange" />
        </el-card>
        <!-- 盘点记录详情抽屉 -->
        <inventoryRecordDetail @doClose="commoditydetailsClose" :commoditydetailsData="commoditydetailsData"
            :dialogInfoVisible="dialogInfoVisible"></inventoryRecordDetail>
    </div>
</template>



<script setup name="StorageRecord" lang="ts">
const { proxy } = getCurrentInstance() as any;
import inventoryRecordDetail from './components/inventoryRecordDetail.vue'
import { inventoryQueryParmas, inventoryRecordVO } from '@/api/group/productOutbound/types'
import { queryCountList, getStickDept, getUserLists } from '@/api/group/productOutbound/index'
import { listColumn } from '@/api/system/column';
const inventoryRecordColumns = ref()
const selectionRecordList = ref<inventoryRecordVO[]>([]);
const loading = ref(true);
const total = ref(0);
const showSearch = ref(true);
const queryFormRef = ref<ElFormInstance>();
const columnData = ref()
// 产品部门
const warehousedepList = ref<{ deptName: string; deptId: string }[]>([])
// 盘点人
const stockUserList = ref<{ nickName: string; userId: string }[]>([])

// 时间
const putTime = ref()

const dialogInfoVisible = ref(false)
const commoditydetailsData = ref<inventoryRecordVO>({})

const queryLoading = ref(false)

// 盈亏状态
const profitLossStatusList = ref<any>([
    { nickName: '有盈亏', userId: '1' },
    { nickName: '无盈亏', userId: '0' },
])

const queryParams = ref<inventoryQueryParmas>({
    pageNum: 1,
    pageSize: 10,
    createDept: undefined,
    createBy: undefined,
    differenceTag: undefined,
    startTime: undefined,
    endTime: undefined,
    countId: undefined,
})

watch(() => queryParams.value.countId, (newValue: any) => {
    if (isNaN(newValue) || newValue.length > 19) {
        queryParams.value.countId = undefined;
    }
}, { deep: true })

/** 完成时间筛选 */
const pickerChange = (val: string[]) => {
    queryParams.value.startTime = val[0]
    queryParams.value.endTime = val[1]
}

/** 查询列表 */
const getList = async () => {
    try {
        loading.value = true;
        const res = await queryCountList({
            ...queryParams.value, isAsc: "desc", orderByColumn: "finishTime"
        });
        selectionRecordList.value = res.rows;
        total.value = res.total;
        loading.value = false;
        queryLoading.value = false
    } catch (e) {
    } finally {
        loading.value = false;
    }
};
/** 搜索按钮操作 */
const handleQuery = () => {
    queryLoading.value = true
    queryParams.value.pageNum = 1;
    getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    queryParams.value.startTime = undefined
    queryParams.value.endTime = undefined
    putTime.value = undefined
    stockUserList.value = []
    handleQuery();
};

/** 获取产品部门 */
const getWarehousingDept = async () => {
    const res = await getStickDept()
    warehousedepList.value = res.data
}

/** 根据产品部门查询盘点人 */
const warehouseChange = async (event: string) => {
    if (event) {
        const res = await getUserLists({ deptId: event })
        stockUserList.value = res.data
        queryParams.value.createBy = undefined
    } else {
        stockUserList.value = []
        queryParams.value.createBy = undefined
    }
}
/** 查看商品详情 */
const handleInfo = (row: inventoryRecordVO) => {
    nextTick(async () => {
        // const res: any = await queryCountDetailList({countId: (row as any).id});
        dialogInfoVisible.value = true;
        commoditydetailsData.value = row
    });
};
/** 商品详情关闭 */
const commoditydetailsClose = () => {
    dialogInfoVisible.value = false;
}
/** 获取colmun */
const getColmun = async () => {
    const columnDatas = await proxy?.useColumn('产品部盘点记录')
    inventoryRecordColumns.value = columnDatas.columnCustom
    columnData.value = columnDatas
    queryParams.value.pageSize = columnDatas.columnPageSize || 10
}
/** 拖拽事件 */
const dragEnd = async (newWidth: number, oldWidth: number, column: any, event: MouseEvent) => {
    columnData.value.columnCustom.map((item: any) => {
        if (item.prop == column.property) {
            item.width = newWidth
        }
    })
    await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize)
}
/** 页数变化 */
const paginationChange = async () => {
    await getList();
    await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize)
    getColmun()
}
onMounted(async () => {
    queryParams.value.pageNum = 1;
    await getColmun();
    await getList();
    getWarehousingDept();
})

</script>
<style lang="scss" scoped>
.mb96 {
    margin-bottom: 96px;
}

:deep(.el-card__header) {
    display: flex;
    justify-content: flex-end;
}

.form_button {
    display: flex;
    justify-content: flex-end;
}
</style>